<script>
import axios from "axios";

export default {
  name: "student",
  data() {
    return {
      stu: null,
      queryId: null,
      stuById: null,
      name: null,
      id: null,
      deleteId: null,
      student_id: null,
      classname: null,
      telephone: null,
      qq: null,
    }
  },
  methods: {
    getAllStu() {
      axios.get("http://localhost:8080/Allstu")
          .then(resp => {
            console.log(resp);
            this.stu = resp.data;
          })
    },
    getStuById() {
      axios.get(`http://localhost:8080/stu/${this.queryId}`)
          .then(resp => {
            console.log(resp);
            this.stuById = resp.data;
          })
    },
    addStudent() {
      axios.post("http://localhost:8080/stu",
          {
            name: this.name,
            student_id: this.student_id,
            classname: this.classname,
            telephone: this.telephone,
            qq: this.qq,

          }).then(resp => {
        console.log(resp);
      })
    },
    updateStudent() {
      axios.put("http://localhost:8080/stu", {
        id: this.id,
        student_id: this.student_id,
        classname: this.classname,
        telephone: this.telephone,
        qq: this.qq,
      }).then(resp => {
        console.log(resp);
      })
    },
    deleteStuById() {
      axios.delete("http://localhost:8080/stu", {
        params: {
          id: this.deleteId
        }
      }).then(resp => {
        console.log(resp);
      })
    }

  }
}
</script>

<template>
  <div>
    <p>666</p>
    <button v-on:click="getAllStu">获取所有学生</button>
    <div v-for="student in stu" v-bind:key=student.id>
      {{ student }}
    </div>
    <p></p>
    <div>请输入要查询用户信息的id：
      <input v-model="queryId">
    </div>
    <button v-on:click="getStuById">通过id获取指定用户</button>
    <div>{{ stuById }}</div>
    <p></p>
    <div>
      请输入要添加的学生信息：
      <div>
        name
        <input v-model="name">
      </div>
      <div>
        student_id
        <input v-model="student_id">
      </div>
      <div>
        classname
        <input v-model="classname">
      </div>
      <div>
        telephone
        <input v-model="telephone">
      </div>
      <div>
        qq
        <input v-model="qq">
      </div>
    </div>
    <button v-on:click="addStudent">添加用户</button>

    <div>
      请输入要修改的学生信息：
      <div>
        name
        <input v-model="name">
      </div>
      <div>
        student_id
        <input v-model="student_id">
      </div>
      <div>
        classname
        <input v-model="classname">
      </div>
      <div>
        telephone
        <input v-model="telephone">
      </div>
      <div>
        qq
        <input v-model="qq">
      </div>
    </div>
    <button v-on:click="updateStudent">修改学生</button>

    <div>
      请输入删除学生的id：
      <input v-model="deleteId">
      <div>
        <button v-on:click="deleteStuById">删除学生信息</button>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>